let oBox = $("#box");
let liDoms = $("#doudouBox").children();
let imgDoms = $("#imgBox").children();


let currIndex = 0;
let myTimer ;

function autoPlay(){
    myTimer = setInterval(function(){
        goImg(currIndex+1);
    },2000);
}

function stopPlay(){
    window.clearInterval(myTimer);
}

function goImg(index){  // index = 3
    // 1、改变数据(计算：谁出，谁进)
    // 1.1)、运算
    let outIndex = currIndex;//要淡出的图片下标
    currIndex = index; //要淡入的图片下标

    // 2.2)、边界判断
    if(currIndex>4){
        currIndex = 0; //0
    }

    // 2、改变外观
    // 2.1）、滑入滑出图片
    $(imgDoms[currIndex]).css({
        left:"1200px"
    });

    $(imgDoms[currIndex]).add(imgDoms[outIndex]).animate({
        left:"-=1200px"
    },500);
  
    // 2.2）、改变豆豆
    $(liDoms[currIndex]).css("backgroundColor","red");
    $(liDoms[outIndex]).css("backgroundColor","#fff");
}

$(function(){

    // 1、自动播放
    autoPlay();

    // 2、鼠标放入停止播放
    oBox.mouseenter(function(){
        stopPlay()
    });

    // 3、鼠标离开继续播放
    oBox.mouseleave(function(){
        autoPlay();
    })

    // 4、点击豆豆（分页器）跳转到指定的图片
    liDoms.click(function(){
        goImg($(this).index());
    });

    // 5、点击图片跳转连接
    $("#imgBox").click(function(){
        location.href=hrefs[currIndex];
    })

});

